<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
	xmlns:p="http://primefaces.org/ui">
<f:view>
	<f:metadata>
		<f:viewAction action="#{menuMB.updateMenu(1)}" />
	</f:metadata>
	<ui:composition template="/WEB-INF/templates/defaultLayout.xhtml">

		<!-- Definiendo la cabecera de la pagina -->
		<ui:define name="title">
			<h:outputText value="Cancelar Cta. Plazo fijo" />
		</ui:define>

		<!-- Definiendo el cuerpo de la pagina -->
		<ui:define name="content">

			<h:outputStylesheet library="css" name="main.css" />

			<h:form>
				<h:panelGroup rendered="#{cancelacionCuentaplazofijoBean.failure}">
					<div class="p6n-api-access-in-page-error" style="left: 416px;">
						<div>
							<div>
								<p>
									<h:messages />
								</p>
							</div>
							<div style="text-align: center;">
								<h:commandLink value="Volver"
									action="/caja/cuentasPersonales/cuentaPlazofijo/cancelacion?faces-redirect=true"
									immediate="true" styleClass="p6n-api-access-in-page-error-link" />
							</div>
						</div>
					</div>
					<div class="modal-dialog-bg"
						style="opacity: 0.4; width: 1366px; height: 1000px;"></div>
				</h:panelGroup>
			</h:form>

			<div style="margin-left: 50px;">
				<br />
				<div class="p6n-api-consent-screen-title">Cancelación Cuenta
					Plazo Fijo</div>

				<h:panelGroup id="panelGroupCancelacion"
					rendered="#{!cancelacionCuentaplazofijoBean.success}">
					<h:form id="formCancelacion">
						<p:focus for="txtNumerocuenta"></p:focus>
						<div class="p6n-api-consent-screen-inputs">
							<div class="p6n-api-consent-screen-input-section">
								<div class="p6n-api-consent-screen-label">NUMERO CUENTA</div>
								<div>
									<div style="float: left;">
										<h:inputText id="txtNumerocuenta"
											value="#{cancelacionCuentaplazofijoBean.cuentabancariaView.numerocuenta}"
											required="true" pt:placeholder="Número de Cuenta"
											requiredMessage="Ingrese un numero de cuenta"
											validatorMessage="Numero de cuenta no valida" maxlength="14"
											readonly="true">
										</h:inputText>
									</div>
									<div style="float: left;">
										<h:commandLink styleClass="button" style="margin: 0 0 0 1px;">
											<span class="icon icon198"></span>
											<f:ajax
												listener="#{cancelacionCuentaplazofijoBean.setDialogOpen(true)}"
												render=":dlgBuscarcuenta :formBuscarcuentaporte" />
										</h:commandLink>
									</div>
								</div>
							</div>
							<div
								class="p6n-api-consent-screen-input-error p6n-api-consent-screen-product-name-error-msg"
								style="float: inherit;">
								<h:message for="txtNumerocuenta" />
							</div>
							<br /> <br />
							<div class="p6n-api-consent-screen-input-section">
								<div style="display: inline-block; width: 300px;">
									<div class="p6n-api-consent-screen-label">SOCIO</div>
									<div>
										<div>
											<h:outputLabel
												value="#{cancelacionCuentaplazofijoBean.cuentabancariaView.socio}" />
										</div>
									</div>
								</div>
								<div style="display: inline-block; width: 300px;">
									<div class="p6n-api-consent-screen-label">NÚMERO DOCUMENTO</div>
									<div>
										<div>
											<h:outputLabel
												value="#{cancelacionCuentaplazofijoBean.cuentabancariaView.abreviaturaTipodocumento}: #{cancelacionCuentaplazofijoBean.cuentabancariaView.numeroDocumento}" />
										</div>
									</div>
								</div>
								<div style="display: inline-block; width: 190px;">
									<div class="p6n-api-consent-screen-label" style="width: 150px;">CODIGO
										SOCIO</div>
									<div>
										<h:outputLabel
											value="#{cancelacionCuentaplazofijoBean.cuentabancariaView.idSocio}" />
									</div>
								</div>
							</div>
							<div class="p6n-api-consent-screen-input-section">
								<div style="display: inline-block; width: 300px;">
									<div class="p6n-api-consent-screen-label">NUMERO CUENTA</div>
									<div>
										<div>
											<h:outputLabel
												value="#{cancelacionCuentaplazofijoBean.cuentabancariaView.numerocuenta}" />
										</div>
									</div>
								</div>
								<div style="display: inline-block; width: 300px;">
									<div class="p6n-api-consent-screen-label">TIPO CUENTA</div>
									<div>
										<div>
											<h:outputLabel
												value="#{cancelacionCuentaplazofijoBean.cuentabancariaView.denominacionTipocuentabancaria}" />
										</div>
									</div>
								</div>
								<div style="display: inline-block; width: 300px;">
									<div class="p6n-api-consent-screen-label">TIPO MONEDA</div>
									<div>
										<div>
											<h:outputLabel
												value="#{cancelacionCuentaplazofijoBean.cuentabancariaView.denominacionTipomoneda} (#{cancelacionCuentaplazofijoBean.cuentabancariaView.abreviaturaTipomomeda})"/>
										</div>
									</div>
								</div>
							</div>
							<div class="p6n-api-consent-screen-input-section">
								<div style="display: inline-block; width: 300px;">
									<div class="p6n-api-consent-screen-label">DEPOSITO</div>
									<div>
										<div>
											<h:outputLabel
												value="#{cancelacionCuentaplazofijoBean.cuentabancariaView.abreviaturaTipomomeda} #{cancelacionCuentaplazofijoBean.cuentabancariaView.saldoCuentabancaria}"
												styleClass="sf-label-bold" />
										</div>
									</div>
								</div>
								<div style="display: inline-block; width: 300px;">
									<div class="p6n-api-consent-screen-label">INTERES</div>
									<div>
										<div>
											<h:outputLabel
												value="#{cancelacionCuentaplazofijoBean.cuentabancariaView.abreviaturaTipomomeda} #{cancelacionCuentaplazofijoBean.interesCuenta}"
												styleClass="sf-label-bold" />
										</div>
									</div>
								</div>
								<div style="display: inline-block;">
									<div class="p6n-api-consent-screen-label">TOTAL</div>
									<div>
										<div>
											<h:outputLabel
												value="#{cancelacionCuentaplazofijoBean.cuentabancariaView.abreviaturaTipomomeda} #{cancelacionCuentaplazofijoBean.totalCuenta}"
												styleClass="sf-label-bold" />
										</div>
									</div>
								</div>
							</div>
							<div class="p6n-api-consent-screen-input-section">
								<div style="display: inline-block; width: 300px;">
									<div class="p6n-api-consent-screen-label">TEA</div>
									<div>
										<div>
											<h:outputLabel
												value="#{cancelacionCuentaplazofijoBean.teaCuenta} %"
												styleClass="sf-label-bold" />
										</div>
									</div>
								</div>								

							</div>
							<div class="p6n-api-consent-screen-input-section">
								<div style="display: inline-block; width: 300px;">
									<div class="p6n-api-consent-screen-label">FECHA APERTURA</div>
									<div>
										<div>
											<h:outputLabel
												value="#{cancelacionCuentaplazofijoBean.cuentabancariaView.fechaaperturaCuentabancaria}"
												styleClass="sf-label-bold" >
												<f:convertDateTime pattern="dd/MM/yyyy" />
											</h:outputLabel>
										</div>
									</div>
								</div>
								<div style="display: inline-block; width: 300px;">
									<div class="p6n-api-consent-screen-label">FECHA CIERRE</div>
									<div>
										<div>
											<h:outputLabel
												value="#{cancelacionCuentaplazofijoBean.cuentabancariaView.fechacierreCuentabancaria}"
												styleClass="sf-label-bold" >
												<f:convertDateTime pattern="dd/MM/yyyy" />
											</h:outputLabel>
										</div>
									</div>
								</div>
								<div style="display: inline-block;">
									<div class="p6n-api-consent-screen-label">PERIODO</div>
									<div>
										<div>
											<h:outputLabel
												value="#{cancelacionCuentaplazofijoBean.periodoCuenta} Días"
												styleClass="sf-label-bold" />
										</div>
									</div>
								</div>
							</div>
							<div class="p6n-api-consent-screen-input-section">

								<div class="p6n-api-consent-screen-label" style="width: 150px;">FECHA
									CANCELACION</div>
								<div>
									<h:outputLabel
										value="#{cancelacionCuentaplazofijoBean.fechaCancelacion}">
										<f:convertDateTime pattern="dd/MM/yyyy" />
									</h:outputLabel>
								</div>

							</div>

							<div class="p6n-api-consent-screen-input-section">
								<div
									style="display: inline-block; width: 600px; vertical-align: top;">
									<div class="p6n-api-consent-screen-label" style="width: 150px;">TITULARES</div>
									<div>
										<h:dataTable
											value="#{cancelacionCuentaplazofijoBean.cuentabancaria.titulares}"
											var="titular">
											<h:column>
										#{titular.personanatural.apellidopaterno}&nbsp;#{titular.personanatural.apellidomaterno}, #{titular.personanatural.nombres}
													</h:column>
											<h:column>
														&nbsp;|&nbsp;
														#{titular.personanatural.tipodocumento.abreviatura}:#{titular.personanatural.numerodocumento}
													</h:column>
										</h:dataTable>
									</div>
								</div>
								<div style="display: inline-block; width: 300px;">
									<div class="p6n-api-consent-screen-label">CANT.
										RETIRANTES</div>
									<div>
										<div>
											<h:outputLabel
												value="#{cancelacionCuentaplazofijoBean.cuentabancariaView.cantidadretirantesCuentabancaria}"
												styleClass="sf-label-bold" />
										</div>
									</div>
								</div>
							</div>

							<div class="sf-separator"></div>

							<div class="sf-buttons" style="float: left;">
								<h:commandButton
									action="#{cancelacionCuentaplazofijoBean.cancelarCuentaplazofijo()}"
									value="Aceptar" styleClass="action blue" />
								<h:commandButton value="Cancelar" action="/caja/cuentasPersonales/index?faces-redirect=true" styleClass="action" immediate="true"/>
							</div>
						</div>
					</h:form>
				</h:panelGroup>

				<h:panelGroup rendered="#{cancelacionCuentaplazofijoBean.success}">
					<br />
					<h:panelGroup id="voucher">
						<table id="t"
							style="width: 220px; border: solid 0px #E9E6E6; margin-bottom: 0px;">
							<tr style="vertical-align: center;">
								<td colspan="1"
									style="text-align: center; font-weight: bold; font-size: 12px;">
									<p:graphicImage name="logo_coop_voucher.png" library="images/logo_coop" />
								</td>
								<td colspan="3"
									style="text-align: left; font-weight: bold; font-size: 9px; vertical-align: middle">
									<h:outputText value="C.A.C." /> <br /> <h:outputText
										style="font-size: 16px;" value="CAJA VENTURA" />
								</td>
							</tr>
							<tr>
								<td colspan="4"
									style="text-align: center; font-weight: bold; font-size: 11px;">
									CANCELACIÓN #{cancelacionCuentaplazofijoBean.vouchercajaView.denominacionTipocuentabancaria}</td>
							</tr>
							<tr>
								<td style="width: 15%; font-weight: bold; font-size: 10px;">AGENCIA:</td>
								<td
									style="width: 20%; font-size: 10px; font-family: Century Gothic;">#{cancelacionCuentaplazofijoBean.vouchercajaView.abreviaturaAgencia}</td>
								<td
									style="width: 30%; text-align: right; font-weight: bold; font-size: 10px;">Nº
									TRANS:</td>
								<td
									style="width: 35%; font-size: 11px; font-family: Century Gothic;">#{cancelacionCuentaplazofijoBean.vouchercajaView.idTransaccioncaja}</td>
							</tr>
							<tr>
								<td colspan="1"
									style="font-weight: bold; font-size: 10px;">Nº
									OP:</td>
								<td colspan="1" style="font-size: 11px; font-family: Century Gothic;">#{cancelacionCuentaplazofijoBean.returnNumOperacion()}</td>
								<td colspan="1"
									style="font-weight: bold; font-size: 10px; text-align: right;">CAJA:</td>
								<td colspan="1" style="font-size: 11px; font-family: Century Gothic;">#{cancelacionCuentaplazofijoBean.vouchercajaView.abreviaturaCaja}</td>
							</tr>
							<tr>
								<td style="font-weight: bold; font-size: 10px;">FECHA:</td>
								<td style="font-size: 11px; font-family: Century Gothic;"><h:outputText
										value="#{cancelacionCuentaplazofijoBean.vouchercajaView.fecha}">
										<f:convertDateTime pattern="dd/MM/yy" />
									</h:outputText></td>
								<td style="font-weight: bold; font-size: 10px; text-align: right;">HORA:</td>
								<td style="font-size: 11px; font-family: Century Gothic;"><h:outputText
										value="#{cancelacionCuentaplazofijoBean.vouchercajaView.hora}">
										<f:convertDateTime dateStyle="full" timeZone="EST" type="time" />
									</h:outputText></td>
							</tr>
							<tr>
								<td colspan="1" style="font-weight: bold; font-size: 10px;">CUENTA:</td>
								<td colspan="3" style="font-size: 11px; font-family: Century Gothic;"><h:outputText
										value="#{cancelacionCuentaplazofijoBean.vouchercajaView.numeroCuenta}" />
								</td>
							</tr>
							<tr>
								<td colspan="1" style="font-weight: bold; font-size: 10px;">SOCIO:</td>
								<td colspan="3" style="font-size: 11px; font-family: Century Gothic;">#{cancelacionCuentaplazofijoBean.vouchercajaView.titular}</td>
							</tr>
							<tr>
								<td colspan="1" style="font-weight: bold; font-size: 10px;">MONEDA:</td>
								<td colspan="3" style="font-size: 11px; font-family: Century Gothic;">#{cancelacionCuentaplazofijoBean.vouchercajaView.denominacionMoneda} (#{cancelacionCuentaplazofijoBean.vouchercajaView.abreviaturaMoneda})</td>
							</tr>
							<tr>
								<td colspan="4" style="font-size: 5px;">&nbsp;</td>
							</tr>
							<tr>
								<td colspan="2" style="font-weight: bold; font-size: 10px;">SALDO TOTAL:</td>
								<td colspan="2" style="font-size: 11px; font-family: Century Gothic; text-align: right;">#{cancelacionCuentaplazofijoBean.vouchercajaView.abreviaturaMoneda}#{cancelacionCuentaplazofijoBean.vouchercajaView.monto}</td>
							</tr>
							<tr>
								<td>&nbsp;</td>
							</tr>
							<tr>
								<td colspan="4" style="font-size: 11px; text-align: center; font-family: Century Gothic;">
									<h:outputText style="font-size: 11px; text-align: center; font-family: Century Gothic;" value="-------------------------------------" />
									<br />
									<h:outputText style="font-size: 11px; text-align: center; font-family: Century Gothic;" value="Firma Titular(es)" />
								</td>
							</tr>

							<tr>
								<td colspan="4" style="text-align: center; font-size: 10px;">"Verifique
									su dinero antes de retirarse de la ventanilla"</td>
							</tr>
						</table>
					</h:panelGroup>
					<h:form>
						<h:commandButton value="Imprimir" type="button" 
							icon="ui-icon-print" styleClass="action blue">
							<p:printer target=":voucher" />
						</h:commandButton>
						<h:commandButton value="Salir"
							action="/caja/cuentasPersonales/index?faces-redirect=true"
							immediate="true" styleClass="action red" />
					</h:form>
				</h:panelGroup>

				<h:panelGroup id="dlgBuscarcuenta">
					<h:panelGroup
						rendered="#{cancelacionCuentaplazofijoBean.dialogOpen}">
						<div class="modal-dialog p6n-popup"
							style="left: 412.5px; top: 100px; width: 670px;">
							<h:form id="formBuscarcuentaporte">
								<p:focus for="search"></p:focus>
								<div class="modal-dialog-content">
									<div id="p6n-cloudsql-content">
										<div>
											<div>
												<div>
													<div>
														<h:inputText id="search"
															onkeyup="this.value = this.value.toUpperCase();"
															pt:placeholder="Número de Documento"
															value="#{cancelacionCuentaplazofijoBean.valorBusqueda}"
															style="width: 250px;float: left;" />
														&nbsp;
														<h:commandLink styleClass="button"
															style="margin: 0px;float: left;">
															<span class="icon icon198"></span>
															<span class="label"></span>
															<f:ajax execute="@form"
																listener="#{cancelacionCuentaplazofijoBean.buscarCuentabancaria()}"
																render="tblResultadoBusqueda" />
														</h:commandLink>
														<h:selectOneMenu id="cmbTipoBusqueda"
															value="#{cancelacionCuentaplazofijoBean.comboTipodocumento.itemSelected}">
															<f:selectItem
																itemLabel="Ap. y Nombres / Razón Social"
																itemValue="" />
															<f:selectItems
																value="#{cancelacionCuentaplazofijoBean.comboTipodocumento.items.entrySet()}"
																var="val" itemLabel="#{val.value.abreviatura}"
																itemValue="#{val.key}" />
														</h:selectOneMenu>
													</div>
													<div
														class="p6n-cloudsql-name-message p6n-cloudsql-input-message">
														<h:messages />
													</div>
												</div>
											</div>
										</div>
										<hr />
										<div class="p6n-cloudsql-form" style="width: 670px;">
											<div
												class="p6n-cloudsql-form-control p6n-cloudsql-form-control-name">
												<div class="p6n-cloudsql-name-input ">
													<div class="p6n-input-prepend">
														<p:dataTable id="tblResultadoBusqueda" var="cuenta"
															value="#{cancelacionCuentaplazofijoBean.tablaCuentabancaria.rows}"
															selectionMode="single"
															selection="#{cancelacionCuentaplazofijoBean.cuentabancariaView}"
															rowKey="#{cuenta}" rowIndexVar="row">

															<p:column headerText="Nro"
																style="text-align:center; font-size: 11px; width:10px;">
																<h:outputText value="#{row + 1}" />
															</p:column>
															<p:column headerText="Tipo Cta"
																style="font-size: 11px; width:95px;">
																<h:outputText
																	value="#{cuenta.denominacionTipocuentabancaria}" />
															</p:column>
															<p:column headerText="Nº Cuenta"
																style="font-size: 11px; width:90px;">
																<h:outputText value="#{cuenta.numerocuenta}" />
															</p:column>
															<p:column headerText="Titular"
																style="font-size: 11px;width:120px;">
																<h:outputText value="#{cuenta.socio}" />
															</p:column>
															<p:column headerText="T.Doc."
																style="font-size: 11px; width:40px;">
																<h:outputText value="#{cuenta.abreviaturaTipodocumento}" />
															</p:column>
															<p:column headerText="Nº Doc."
																style="font-size: 11px; width:70px;">
																<h:outputText value="#{cuenta.numeroDocumento}" />
															</p:column>
															<p:column headerText="Saldo">
																<h:outputText
																	value="#{cuenta.abreviaturaTipomomeda}#{cuenta.saldoCuentabancaria}" />
															</p:column>
															<p:column headerText="Fec. Cierre" style="font-size: 11px; width:80px;">
																<h:outputText
																	value="#{cuenta.fechacierreCuentabancaria}" >
																	<f:convertDateTime pattern="dd/MM/yyyy" />
																</h:outputText>
															</p:column>
														</p:dataTable>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="modal-dialog-buttons">
									<h:commandButton value="Aceptar"
										action="#{cancelacionCuentaplazofijoBean.setCuentabancariaSelected()}"
										styleClass="action blue">
									</h:commandButton>
									<h:commandButton value="Cancelar" immediate="true"
										action="#{cancelacionCuentaplazofijoBean.setDialogOpen(false)}">
									</h:commandButton>
								</div>
							</h:form>
						</div>
					</h:panelGroup>
				</h:panelGroup>
			</div>

		</ui:define>
	</ui:composition>
</f:view>
</html>